<template>
  <div class="search-result">
    <!-- 列表组件 -->
    <van-list v-model="loading"
              :finished="finished"
              :error.sync ="error"
              @load="loadResultList">
      <van-cell v-for="item in list"
                :key="item.art_id"
                :title="item.title" />
    </van-list>

  </div>
</template>

<script>
import { getSearchResult } from '@/api/search'
export default {
  name: 'SearchResult',
  data () {
    return {
      list: [], // 搜索结果列表
      page: 1, // 页码
      size: 10, // 每页数量
      loading: false, // 是否加载中
      finished: false, // 是否结束
      error: false // 是否错误
    }
  },
  props: {
    // 搜索关键字
    searchValue: {
      type: String,
      required: true
    }
  },
  methods: {
    // 获取搜索结果
    async loadResultList () {
      try {
        // 发请求
        const { data: res } = await getSearchResult({
          q: this.searchValue,
          per_page: this.size,
          page: this.page
        })
        // 追加数据到列表
        this.list.push(...res.data.results)
        // 判断是否结束
        if (res.data.results.length < this.size) {
          this.finished = true
        } else {
          // 页码+1
          this.page++
        }
      } catch (error) {
        this.$toast.fail('获取搜索结果失败')
        this.error = true
      }
      // 关闭加载中
      this.loading = false
    }
  }
}
</script>

<style lang="less" scoped>

</style>
